<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="dice">
    <meta name="author" content="weina">
    <title>roll dice</title>
    <link rel="stylesheet" href="/css/bootstrap.css">
    <script src="/js/jquery-3.3.1.min.js"></script>
    <script src="./js/bootstrap.js"></script>
</head>
<body>

<div class="container " style="margin-top: 100px;height: 300px;width: 100%;margin-bottom:40px;">
    <div class="row" style="height: 100%">
        <div id="r1" class="col-md-3"
             style="height: 100%; border: beige 1px solid;text-align: center;line-height:200px;font-size: 16pt"></div>
        <div id="r2" class="col-md-3"
             style="height: 100%; border: beige 1px solid;text-align: center;line-height:200px;font-size: 16pt"></div>
        <div id="r3" class="col-md-3"
             style="height: 100%; border: beige 1px solid;text-align: center;line-height:200px;font-size: 16pt"></div>
        <div id="r4" class="col-md-3"
             style="height: 100%; border: beige 1px solid;text-align: center;line-height:200px;font-size: 16pt"></div>
    </div>
</div>
<div class="container">
    <div class="form-horizontal">
        <div class="form-group row">
            <div class="col-sm-12" style="text-align: center">
                <button class="btnRoll btn btn-primary" style="width: 200px">Roll</button>
            </div>
        </div>
    </div>
</div> <!-- /container -->
<input th:type="hidden" th:value="${room.roomNumber}" class="roomNumber" name="roomNumber"/>
<input th:type="hidden" th:value="${room.roomOwnerName}" class="roomOwnerName" name="roomOwnerName"/>

<script type="text/javascript">

    $(document).keyup(function (event) {
        if (event.keyCode === 13) {
            $(".btnRoll").trigger("click");
        }
    });

    $('.btnRoll').bind('click', function () {
        roll();
    });

    function roll() {
        //build random
        var r1 = Math.ceil(Math.random() * 6);
        var r2 = Math.ceil(Math.random() * 6);
        var r3 = Math.ceil(Math.random() * 6);
        var r4 = Math.ceil(Math.random() * 6);
        //submit data
        var diceNumber = r1 + "," + r2 + "," + r3 + "," + r4;
        var roomNumber = $(".roomNumber").val();
        var roomOwnerName = $(".roomOwnerName").val();
        var param = {
            diceNumber: diceNumber,
            roomNumber: roomNumber,
            roomOwnerName: roomOwnerName
        };
        $.ajax({
            type: "post",
            dataType: "json",
            contentType: "application/json",
            url: "/player/rollDice",
            data: JSON.stringify(param),
            success: function (data) {
                if (data.result === "success" && data.bizCode === "E_0000") {
                    $("#r1").html(r1);
                    $("#r2").html(r2);
                    $("#r3").html(r3);
                    $("#r4").html(r4);
                    alert("success");
                } else {
                    alert(data.bizMsg);
                }
            }
        });
    }

</script>
</body>
</html>